<template>
  <div class="md-user-center">
    <div class="md-user-main">
      <div class="left-box">
        <ul>
          <li v-for="(item,index) in urlList" :key="index" :class="item.url === currPath ?'on':''" @click="handleClick(item, index)">
            <nuxt-link :to="item.url">
              <div class="a">
                {{item.name}}
              </div>
            </nuxt-link>
          </li>
        </ul>
      </div>
      <div class="right-box">
        <nuxt />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MDUserCenter',
  layout: 'dynamic',
  data () {
    return {
      currPath: '/userCenter/baseInfo',
      currTitle: 'Base Information',
      urlList: [
        {
          url: '/userCenter/baseInfo',
          name: 'Base Information'
        },
        {
          url: '/userCenter/orderInfo',
          name: 'Order Information'
        },
        // {
        //   url: '/userCenter/applyProduct',
        //   name: 'Apply Product Information'
        // },
        {
          url: '/userCenter/address',
          name: 'Delivery Address'
        },
        {
          url: '/userCenter/socialData',
          name: 'Social Data'
        }
      ]
    }
  },
  watch: {
    $route: {
      handler (route) {
        this.currPath = route.path
      }
    }
  },
  mounted () {
    this.currPath = this.$route.path
  },
  methods: {
    handleClick (item) {
      this.currTitle = item.name
    }
  }
}
</script>
<style lang="scss" scoped>
.md-user-center {
  width: 100%;
  background: #f5f5f5;
  .md-user-main {
    max-width: 1200px;
    min-height: calc(100vh - 66px);
    margin: 0 auto;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
  }
  .left-box {
    width: 211px;
    box-sizing: border-box;
    background-color: #fff;
    ul {
      padding: 10px;
      li {
        width: 185px;
        height: 56px;
        line-height: 56px;
        cursor: pointer;
        .a {
          height: 100%;
          font-size: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 16px;
            height: 16px;
            margin-right: 7px;
          }
        }
      }
      .on {
        background: rgba(255, 199, 44, 0.2);
        a {
          color: $md-primary-color;
        }
      }
      .icon {
        margin-right: 6px;
      }
    }
  }
  .right-box {
    width: calc(100% - 211px - 20px);
    flex: 1;
    margin-left: 20px;
    box-sizing: border-box;
    background-color: #fff;
    padding: 20px 30px;
    box-sizing: border-box;
  }
}
</style>